<template>
  <div class="app-container banner">
    <p class="tiptext">上门预约引导图片</p>
    <div :class="list.length > 0 ? 'hideupload' : ''" >
        <el-upload
        :action="uploadImgUrl"
        list-type="picture-card"
        :file-list="list"
        :limit="1"
        name="file"
        :headers="headers"
        :before-upload="handleBeforeUpload"
        :on-success="handleUploadSuc"
        >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
            <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
            >
                <i class="el-icon-zoom-in"></i>
            </span>
            <!-- <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleEdit(file)"
            >
                <i class="el-icon-edit"></i>
            </span> -->
            <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove"
            >
                <i class="el-icon-delete"></i>
            </span>
            </span>
        </div>
        </el-upload>
    </div>
    <!-- <p class="tiptext">上门预约细节描述</p>
    <el-input
        style="width: 1000px;"
        type="textarea"
        :rows="3"
        placeholder="请输入内容"
        v-model="detailText">
    </el-input>
    <div style="margin-top: 10px" >
        <el-button type="primary" @click="submitDetail" >提交细节描述</el-button>
    </div> -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
  
</template>
  <script>
import {
  addBanner,
  deleteBnaner,
  editBnaner,
} from "@/api/system/banner";
import { assignSetting,fixAssignConfig } from '@/api/system/config'
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      list: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      addDialogVisible: false,
      cacheImgUpload: {
        url: "",
        name: "",
        state: true,
      },
      isEdit: false,
      editId: 0,
      imgurl: '',
      detailText: ''
    };
  },
  methods: {
    handleRemove(file) {
    //   this.$confirm("此操作将删除该图片, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(() => {
    //     this.list = []
    //   });
      this.list = []
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传前loading加载
    handleBeforeUpload(file) {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadSuc(res) {
        this.imgurl = res.url
        
        const data = {
            configId: 142,
            configValue: this.imgurl,
            configKey: "door_guide",
            configName: "上门服务引导页"
        }
        fixAssignConfig(data)
        .then(res => {
            if(res.code == 200) {
                this.$message({
                    type: "success",
                    message: '修改图片成功',
                })
                this.list = [{
                    url: this.imgurl
                }]
            }
        })
        .finally(() => {
            this.loading.close();
        })
    },
    handleImageUpload(e) {
      this.cacheImgUpload.url = e;
    },
    handleClose() {

      this.$refs["imgload"].clearFile();
    },
    submitDetail() {
        const data = {
            configId: 143,
            configKey: "door_desc",
            configName: "上门服务细节描述",
            configValue: this.detailText
        }
        fixAssignConfig(data).then(res => {
            if(res.code == 200) {
                this.$message({
                    type: "success",
                    message: '修改描述成功',
                })
            }
        })
    }

  },
  mounted() {
    assignSetting(142).then(res => {
        this.list.push({
            url: res.data.configValue
        })
        this.$refs.upload.clearFiles()
    });
    assignSetting(143).then(res => {
        this.detailText = res.data.configValue
    })
  },
};
</script>
<style>
.hideupload .el-upload--picture-card {
    display: none!important;
}
</style>
  <style scoped>
.banner-input {
  width: 148px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #efefef;
  outline: 0;
}
.banner-state {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  height: 148px;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
}
.dialogInput {
  width: 148px;
  height: 40px;
  border: 1px solid #efefef;
  outline: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.stateblock,
.nameblock {
  display: flex;
  align-items: center;
}
.imgblock {
  display: flex;
  align-items: flex-end;
}
.tiptext {
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 24px;
}
</style>